<template>
	<div class="divmain" style="padding: 0px 20px 0px 20px;display: block;height: 100%;">
		<div ref="divForm" style="padding: 20px 0px 0px 0px;">
			<el-form inline :model="formData">
				<el-row>
					<el-col :span="20">
						<el-form-item label="合作方:">
							<el-input placeholder="请输入合作方名称" v-model="formData.BankInfo"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getTableData">查询</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="4" align="right">
						<el-form-item>
							<el-button type="success" @click="dialogAddForm.show = true">新建</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<div :style="tableHeight">
			<el-table :data="tableData" height="100%" border  v-loading="pagination.loading">
				<el-table-column type="selection" width="40" align="center"></el-table-column>
				<el-table-column type="index" label="序号" width="50" align="center"
					:index="indexMethod"></el-table-column>
				<el-table-column label="合作方" align="center" prop="Name"></el-table-column>
				<el-table-column label="合作方编号" align="center" prop="Number"></el-table-column>
				<el-table-column label="联系方式" align="center" prop="Phone"></el-table-column>
				<el-table-column label="开放信息" align="center" prop="Publicinfo"></el-table-column>
				<el-table-column label="身份证号码" align="center" prop="IDcard"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button plain type="primary" size="mini" style="margin-left: 10px;" @click="dialogUpdataFormEvent(scope.row)">详情</el-button>
						<el-popconfirm title="这是一段内容确定删除吗" @confirm="deletePayrollDetails(scope.row)"
							style="padding-left: 10px;">
							<el-button slot="reference" plain type="danger" size="mini">删除</el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-row>
				<el-col :span="24" align="right">
					<el-pagination @size-change="getTableData" @current-change="getTableData"
						:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
						:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
						:total.sync="pagination.total">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
		<el-dialog :visible.sync="dialogAddForm.show" :title="dialogAddForm.title" width="500px" @close="dialogAddFormCloseEvent">
			<AddSupplier :closeFun="closeFun" ref="AddSupplierRef"></AddSupplier>
		</el-dialog>
		<el-dialog :visible.sync="dialogUpdataForm.show" :title="dialogUpdataForm.title" width="500px">
			<UpSupplier :closeFun="closeFun" :updata="dialogUpdataForm.updata" ref="UpSupplierRef"></UpSupplier>
		</el-dialog>
	</div>
</template>

<script>
	import AddSupplier from './AddSupplier.vue'
	import UpSupplier from './UpSupplier.vue'
	export default {
		components: {
			AddSupplier,UpSupplier
		},
		data() {
			return {
				formData: {
					BankInfo: '',
				},
				tableData: [],
				//分页数据绑定
				pagination: {
					loading:false,
					currentPage: 1,
					pagesizes: [10, 100, 500, 1000, 3000],
					pagesize: 10,
					total: 0
				},
				dialogAddForm: {
					show: false,
					title: '新建合作方'
				},
				dialogUpdataForm: {
					show: false,
					title: '修改合作方信息',
					updata:{},
				},
				tableHeight:'',
			}
		},
		mounted() {
			let _this = this
			this.$nextTick(() => {
				_this.getTableData()
				_this.getdivHeight()
			})
			window.addEventListener('resize',()=>{
				_this.getdivHeight()
			})
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			getTableData() {
				this.pagination.loading = true
				this.$http.post('/api/Supplier/GetList/query', {
					key: this.formData.BankInfo,
					PageNumber: this.pagination.currentPage,
					PageSize: this.pagination.pagesize,
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.tableData = Data.Data
					} else {
						this.tableData = []
						this.$message.warning(Message)
					}
					this.pagination.total = Data.Total
					setTimeout(()=>{ this.pagination.loading = false },500)
				}).catch(()=>{
					setTimeout(()=>{ this.pagination.loading = false },500)
				})
			},
			closeFun() {
				this.getTableData()
			},
			dialogAddFormCloseEvent(){
				this.$refs.AddBankInfoRef.resetFieldsEvent()
			},
			deletePayrollDetails(row){
				this.$http.post('/api/Supplier/Delete/delete',{
					Ids:[row.Id]
				}).then(res=>{
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('删除成功')
						this.getTableData()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			dialogUpdataFormEvent(row){
				this.dialogUpdataForm.updata = row	
				this.dialogUpdataForm.show = true	
			},
			//获取高度
			getdivHeight(){
				let idvcheight = this.$refs.divForm.clientHeight
				let asda = idvcheight + 32
				this.tableHeight = { 'height':`calc(100% - ${asda +'px'})` }   
			},
		}
	}
</script>

<style>
</style>